<template>
  <el-card class="auto-card-left">
    <div class="card-header">
      <div class="custom-tabs-label">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M13.6004 17.5492C12.5004 17.5492 9.40039 17.5492 9.40039 15.5492C9.40039 13.5492 12.5004 13.5492 13.6004 13.5492C15.7004 13.5492 16.8004 13.8492 17.4004 14.4492C17.7004 14.7492 17.8004 15.1492 17.8004 15.5492C17.8004 17.5492 14.7004 17.5492 13.6004 17.5492ZM13.6004 6.34922C15.2004 6.34922 16.5004 7.64922 16.5004 9.24922C16.5004 10.8492 15.2004 12.1492 13.6004 12.1492C12.0004 12.1492 10.7004 10.8492 10.7004 9.24922C10.7004 7.64922 12.0004 6.34922 13.6004 6.34922ZM17.2004 2.44922H9.10039C6.10039 2.44922 4.20039 4.04922 4.00039 6.94922H2.90039C2.30039 6.94922 1.90039 7.34922 1.90039 7.94922C1.90039 8.54922 2.30039 8.94922 2.90039 8.94922H6.20039C6.60039 8.94922 6.90039 8.74922 7.00039 8.44922C7.10039 8.54922 7.20039 8.74922 7.20039 8.94922C7.20039 9.54922 6.80039 9.94922 6.20039 9.94922H3.90039V15.0492H2.90039C2.30039 15.0492 1.90039 15.4492 1.90039 16.0492C1.90039 16.6492 2.30039 17.0492 2.90039 17.0492H6.20039C6.60039 17.0492 6.90039 16.8492 7.00039 16.5492C7.10039 16.6492 7.20039 16.8492 7.20039 17.0492C7.20039 17.6492 6.80039 18.0492 6.20039 18.0492H4.10039C4.70039 20.2492 6.40039 21.5492 9.10039 21.5492H17.1004C20.4004 21.5492 22.4004 19.5492 22.4004 16.2492V7.74922C22.4004 4.44922 20.5004 2.44922 17.2004 2.44922Z"
            fill="#007BFF"
          />
        </svg>
        <span
          style="
            color: var(--Primary4-950, #16191d);
            font-family: 'Source Han Sans CN';
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          "
          >员工通讯录{{ Card }}</span
        >
      </div>
      <div class="search">
        <el-input
          v-model="name"
          placeholder="请输入查询姓名"
          class="no-border-input"
          prefix-icon="el-icon-search"
          clearable
          @input="handleSearchInput"
        />
      </div>
    </div>
    <el-table
      :data="filteredContacts"
      class="contact-table"
      show-overflow-tooltip
      :height="tableHeight"
      header-row-class-name="custom-red-header"
    >
      <el-table-column
        v-for="col in contactColumns"
        :key="col.prop"
        v-bind="col"
        :min-width="col.minWidth"
      >
        <template v-if="col.prop === 'sex'" v-slot="scope">
          {{ scope.row.sex === 0 ? "男" : "女" }}
        </template>
      </el-table-column>
    </el-table>
    <div>
      <Pagination
        class="pagination"
        :total="pagination.total"
        :page="pagination.page"
        :limit="pagination.limit"
        :pageSizes="pagination.pageSizes"
        @handleSizeChange="$emit('size-change', $event)"
        @handleCurrentChange="$emit('current-change', $event)"
      />
    </div>
  </el-card>
</template>

<script setup>
import { computed } from "vue";
import Pagination from "@/components/Pagination/pageination.vue";

const props = defineProps({
  searchKey: {
    type: String,
    default: "",
  },
  contactList: {
    type: Array,
    default: () => [],
  },
  pagination: {
    type: Object,
    default: () => ({
      total: 10,
      page: 1,
      limit: 10,
      pageSizes: [10, 20, 30, 50],
    }),
  },
  contactColumns: {
    type: Array,
    default: () => [],
  },
  cardType: {
    type: String,
    default: "DefaultCard", // 默认值
  },
});

const emit = defineEmits([
  "update:search-key",
  "size-change",
  "current-change",
  "update:name",
]);
const name = ref("");
const tableHeight = computed(() => {
  return props.cardType === "HrCard"
    ? "calc(100vh - 695px)"
    : "calc(100vh - 600px)";
});
const handleSearchInput = () => {
  emit("update:name", name.value);
};

const filteredContacts = computed(() => {
  return props.contactList.filter((item) => item.name.includes(name.value));
});

// 监听外部传入的name变化
watch(
  () => props.pagination.name,
  (newVal) => {
    name.value = newVal || "";
  }
);
</script>
<style lang="scss" scoped>
@import "../../style/HR.scss";
.search {
  border: 1px solid #ccc;

  width: 30%;
  height: 36px;
  border-radius: 100px;
}
.auto-card-left {
  border-radius: 8px !important;
  border: 1px solid #fff !important;
  background: #fcfcfd !important;

  /* 阴影1 */
  box-shadow: -38px 83px 25px 0px rgba(168, 168, 189, 0),
    -24px 53px 23px 0px rgba(168, 168, 189, 0.01),
    -14px 30px 20px 0px rgba(168, 168, 189, 0.02),
    -6px 13px 15px 0px rgba(168, 168, 189, 0.03),
    -2px 3px 8px 0px rgba(168, 168, 189, 0.04) !important;
}

:deep(.custom-red-header th) {
  background-color: #fff !important;
  text-align: left !important;
  font-weight: bold;
  color: var(--Primary4-500, #6f7b90);
  font-family: "Source Han Sans CN";
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: normal !important;
}
.pagination {
  background: #fcfcfd;
}

.no-border-input :deep(.el-input__wrapper) {
  box-shadow: none !important;
  background-color: transparent !important;
  padding-left: 0 !important; /* 可选：调整内容对齐 */
}

/* 悬停和聚焦状态也去除边框 */
.no-border-input :deep(.el-input__wrapper:hover),
.no-border-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: none !important;
}

/* 禁用状态的背景色 */
.no-border-input :deep(.is-disabled .el-input__wrapper) {
  background-color: transparent !important;
}
</style>
